<template>
  <div class="body" id="cbdapp">
    <!-- 左侧按钮 -->
    <div class="div-left">
      <div class="div-btn-type">
        <span>页面名称：</span>
        <el-input  v-model="Name" placeholder="请输入页面名称" ></el-input>
      </div>
      <div class="cover-box" v-if="coverImg">
         <img :src="coverImg" alt="" srcset="">
      </div>
      <div class="div-btn-type">
         <div class="fileImg">
          <input type="file" value="" accept=".jpg,.gif,.png" id="imgFile"  @change="addCoverImg($event)" />
          <i class="el-icon-picture-outline"></i> 添加封面图
        </div>
      </div>
      <div class="div-btn-type">
        <el-button type="primary"  icon="el-icon-picture-outline" plain @click="addImg()" style="width: 300px;">
          图片编辑
        </el-button>
      </div>
      <div class="div-btn-type">
        <el-button type="primary"  icon="el-icon-picture" plain @click="addSwiper()"  style="width: 300px;" >
          轮播图编辑
        </el-button>
      </div>
      <div class="div-btn-type">
        <el-button type="primary" icon="el-icon-video-camera-solid" plain  @click="addVideo()" style="width: 300px;">
          视频编辑
        </el-button>
      </div>
      <div class="div-btn-type">
        <el-button type="primary" icon="el-icon-edit-outline" plain @click="addPhoneBtn()" style="width: 300px;">
          一键授权
        </el-button>
      </div>
      <div class="div-btn-type">
        <el-button type="primary"  @click="submitPage()" style="width: 300px;">
          保存
        </el-button>
      </div>
    </div>
    <!-- 左侧按钮end -->
    <!-- 内容展示区 -->
    <div class="div-middle">
      <div class="phone">
      <template v-if="pageData.list==0">
         <div class="no-data">请选择左侧组件添加内容</div>  
      </template>
        <template v-for="(item, index) in pageData.list">
          <!-- ================图片================= -->
          <template v-if="item.type == 'image'">
            <div style="position: relative;" :class="item.selected ? 'selected' : ''" @click="selected(item)">
              <template v-if="item.src == ''">
                <div style="height: 180px; line-height: 180px;">
                  <div class="icon">
                    <img src="v-imgs.png" />
                  </div>
                  <div class="file">
                    <input type="file" value="" accept=".jpg,.gif,.png" id="imgFile"  @change="tirggerFile($event)" />
                    添加图片
                  </div>
                </div>
              </template>
              <template v-else>
                <div :style="{paddingLeft:item.paddingRight+'px',paddingRight:item.paddingRight+'px',paddingBottom:item.paddingBottom+'px',paddingTop:item.paddingTop+'px',marginBottom:item.marginBottom+'px',marginTop:item.marginTop+'px'}">
                   <img :src="item.src" alt="" />
                </div>
                <div class="select-set-div" v-if="item.selected" style="">
                  <div class="item-btn" @click="del(index)">删除</div>
                  <!-- <div class="item-btn" @click="move(index,item,-1)">上移</div> -->
                  <div class="item-btn" @click="move(index, item, 1)">下移</div>
                </div>
              </template>
            </div>
          </template>
          <!-- ================图片end================= -->
          <!-- ================视频================= -->
          <template v-else-if="item.type == 'video'">
            <div :class="item.selected ? 'selected' : ''"  @click="selected(item)" >
              <div class="add-video" v-if="item.src === ''">
                <div class="icon">
                  <img src="v-video.png" />
                </div>
                <div class="file">
                  <input type="file" accept="video/*" @change="changeVideo($event)" />
                  点击这里上传视频
                </div>
              </div>
              <div v-else style="position: relative; width: 100%;">
                <div :style="{paddingLeft:item.paddingRight+'px',paddingRight:item.paddingRight+'px',paddingBottom:item.paddingBottom+'px',paddingTop:item.paddingTop+'px',marginBottom:item.marginBottom+'px',marginTop:item.marginTop+'px'}"> 
                  <video :src="item.src" controls="controls" style="max-width: 100%;" :width="item.videoWidth+'px'" :height="item.videoHeight+'px'"></video>
                </div>
                <div class="select-set-div" v-if="item.selected" style="">
                  <div class="item-btn" @click="del(index)">删除</div>
                  <!-- <div class="item-btn" @click="move(index,item,-1)">上移</div> -->
                  <div class="item-btn" @click="move(index, item, 1)">下移</div>
                </div>
              </div>
            </div>
          </template>
          <!-- ================视频end================= -->
          <!-- ================轮播图================= -->
          <template v-else-if="item.type == 'swiper'">
            <div :class="item.selected ? 'selected' : ''" @click="selected(item)">
              <div class="swiper-wraper" v-if="item.imgs.length === 0">
                <div class="lunbo-img">
                  <img src="lb.png" style="width: 100px; height: auto;" />
                </div>
              </div>
              <div class="lunbo-box" v-else>
                <div v-for="(item, index) in item.imgs">
                  <template v-if="item.cheack">
                    <img :src="item.src" />
                  </template>
                </div>
                <div class="select-set-div" v-if="item.selected" style="">
                  <div class="item-btn" @click="del(index)">删除</div>
                  <!-- <div class="item-btn" @click="move(index,item,-1)">上移</div> -->
                  <div class="item-btn" @click="move(index, item, 1)">下移</div>
                </div>
              </div>
            </div>
          </template>
          <!-- ================轮播图end================= -->
          <!-- 授权按钮 -->
          <template v-else-if="item.type == 'phoneNum'">
            <div  class="phone-box"  :class="item.selected ? 'selected' : ''" @click="selected(item)" >
              <div class="phone-btn" :style="item.styleObject">
                {{ item.txt }}
              </div>
              <div class="select-set-div" v-if="item.selected" style="">
                <div class="item-btn" @click="del(index)">删除</div>
                <!-- <div class="item-btn" @click="move(index,item,-1)">上移</div> -->
                <div class="item-btn" @click="move(index, item, 1)">下移</div>
              </div>
            </div>
          </template>
        </template>
      </div>
    </div>
    <!-- 内容展示区end -->

    <!-- 右侧编辑 -->
    <div class="div-right">
      <!-- 轮播图 -->
      <div class="swiper-edit" v-if="selectObj.type === 'swiper'">
        <div class="swiper-title">轮播图编辑</div>
        <div class="add-swiper">
          <div class="swiper-btn">
            <div class="btn-title">上传图片</div>
            <div class="swiper-add">
              <input type="file" name="swiperImg" id="" accept=".jpg,.gif,.png" @change="addSwiperImgs($event)" />
              +添加轮播图
            </div>
          </div>
          <div class="add-img-box">
            <div class="box-list">
              <div class="swiper-list">
                <!-- 显示图片 -->
                <div class="show-swiper-img" :class="item.cheack ? 'swiper-active' : ''" v-for="(item, index) in selectObj.imgs" @click="handleclick(index)">
                  <img :src="item.src" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 轮播图end -->
      <!-- 图片编辑 -->
       <div class="btn-edit" v-if="selectObj.type === 'image'">
        <div class="btn-title">图片编辑</div>
        <div class="btn-main">
          <div class="img-edit-box">
            <div class="img-edit-left">间距</div>
            <div class="img-edit-right">
              <div class="space-box">
                <div class="margin-top-div">
                  <input type="number" placeholder="上间距" min="0" class="box-input" v-model="selectObj.marginTop">
                </div>
                <div class="margin-bottom-div">
                  <input type="number" placeholder="下间距" min="0" class="box-input box-input-bottom" v-model="selectObj.marginBottom">
                </div>
                <div class="padding-top-div">
                  <input type="number" placeholder="上缩进" min="0" class="box-input" v-model="selectObj.paddingTop">
                </div>
                <div class="padding-right-div">
                  <input type="number" placeholder="右缩进" min="0" class="box-input box-input-right" v-model="selectObj.paddingRight">
                </div>
                <div class="padding-bottom-div">
                  <input type="number" placeholder="下缩进" min="0" class="box-input box-input-bottom" v-model="selectObj.paddingBottom">
                </div>
                <div class="padding-left-div">
                  <input type="number" placeholder="左缩进" min="0" class="box-input box-input-left" v-model="selectObj.paddingLeft">
                </div>
              </div>
            </div>
          </div>
          <div class="img-link"  @click="outerVisible = true">
             <span >请选择链接</span><i class="el-icon-link"></i>
          </div>
        </div>
      </div>
      <!-- 图片编辑end -->
       <!-- 视频编辑 -->
       <div class="btn-edit" v-if="selectObj.type === 'video'">
        <div class="btn-title">视频编辑</div>
        <div class="btn-main">
          <div class="img-edit-box">
            <div class="img-edit-left">间距</div>
            <div class="img-edit-right">
              <div class="space-box">
                <div class="margin-top-div">
                  <input type="number" placeholder="上间距" min="0" class="box-input" v-model.number="selectObj.marginTop">
                </div>
                <div class="margin-bottom-div">
                  <input type="number" placeholder="下间距" min="0" class="box-input box-input-bottom" v-model.number="selectObj.marginBottom">
                </div>
                <div class="padding-top-div">
                  <input type="number" placeholder="上缩进" min="0" class="box-input" v-model.number="selectObj.paddingTop">
                </div>
                <div class="padding-right-div">
                  <input type="number" placeholder="右缩进" min="0" class="box-input box-input-right" v-model.number="selectObj.paddingRight">
                </div>
                <div class="padding-bottom-div">
                  <input type="number" placeholder="下缩进" min="0" class="box-input box-input-bottom" v-model.number="selectObj.paddingBottom">
                </div>
                <div class="padding-left-div">
                  <input type="number" placeholder="左缩进" min="0" class="box-input box-input-left" v-model.number="selectObj.paddingLeft">
                </div>
              </div>
            </div>
          </div>
          <!-- 视频的高度 -->
          <div class="video-input">
            <span class="video-title">视频宽度</span>
            <el-input type="number" placeholder="视频的宽"  v-model="selectObj.videoWidth" style="width:200px"></el-input>
          </div>
           <div class="video-input">
            <span class="video-title">视频高度</span>
            <el-input type="number" placeholder="视频的高"  v-model="selectObj.videoHeight" style="width:200px"></el-input>
          </div>
           <div class="video-input">
            <span class="video-title">是否自动播放</span>
            <el-radio v-model="selectObj.videoPlay" label="1">是</el-radio>
            <el-radio v-model="selectObj.videoPlay" label="0">否</el-radio>
          </div>
        </div>
      </div>
      <!-- 视频编辑end -->
      <!-- 按钮编辑 -->
      <div class="btn-edit" v-if="selectObj.type === 'phoneNum'">
        <div class="btn-title">一键授权编辑</div>
        <div class="titel-mall">用户点击按钮后，可通过微信一键授权手机号码</div>
        <div class="btn-main">
          <div class="main-title">按钮外观</div>
          <div class="btn-list">
            <div class="list-left">按钮文案</div>
            <div class="list-right">
              <el-input type="text" placeholder="请输入按钮内容" v-model="selectObj.txt"></el-input>
            </div> 
          </div>
          <div class="btn-list">
            <div class="list-left">按钮背景颜色</div>
            <div class="list-right">
              <div class="block">
                <el-color-picker v-model="selectObj.styleObject.backgroundColor"></el-color-picker>
              </div>
            </div>
          </div>
           <div class="btn-list">
            <div class="list-left">字体颜色</div>
            <div class="list-right">
              <div class="block">
                <el-color-picker v-model="selectObj.styleObject.color"></el-color-picker>
              </div>
            </div>
          </div> 
        </div>
      </div>
    </div>
    <!-- 图片链接弹出层 -->
    <el-dialog title="请选择链接" :visible.sync="outerVisible" width="70%"> 
      <div slot="footer" class="dialog-footer">
         <el-button @click="outerVisible = false">取 消</el-button>
         <el-button type="primary" @click="innerVisible = true">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { uploadfile, saveAdPage } from '@/api/mdlist'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  data() {
    return {
      Name: '',
      file:"",
      Public: 'ok',
      coverImg:"",//封面图
      selectObj: {},
      pageData: {
        list: [],
      },
      mdid: '',
      outerVisible: false,
    }
  },
  created() {
    this.mdid = this.$route.query && this.$route.query.id
    console.log('99', '---------------mdid:', this.mdid)
    //取活动页面列表，取数据包列表，取视频列表
  },
  methods: {
    selected: function (obj) {
      for (var i = 0; i < this.pageData.list.length; i++) {
        this.pageData.list[i].selected = false
      }
      obj.selected = true
      this.selectObj = obj
    },

    //添加图片
    addImg: function () {
      for (var i = 0; i < this.pageData.list.length; i++) {
        this.pageData.list[i].selected = false
      }
      this.pageData.list.push({
        type: 'image',
        src:'',
        marginTop:0,
        marginBottom:0,
        paddingTop:0,
        paddingRight:0,
        paddingBottom:0,
        paddingLeft:0,
        selected: true
       
      })
      this.selectObj = this.pageData.list[this.pageData.list.length - 1]
    },

    //添加视频
    addVideo() {
      for (var i = 0; i < this.pageData.list.length; i++) {
        this.pageData.list[i].selected = false
      }
      this.pageData.list.push({
        type: 'video',
        src: '',
        marginTop:0,
        marginBottom:0,
        paddingTop:0,
        paddingRight:0,
        paddingBottom:0,
        paddingLeft:0,
        videoWidth:0,
        videoHeight:0,
        videoPlay:"1",
        selected: true,
      })
      this.selectObj = this.pageData.list[this.pageData.list.length - 1]
    },

    //添加轮播图
    addSwiper() {
      for (var i = 0; i < this.pageData.list.length; i++) {
        this.pageData.list[i].selected = false
      }
      this.pageData.list.push({
        type: 'swiper',
        imgs: [],
        selected: true,
      })
      this.selectObj = this.pageData.list[this.pageData.list.length - 1]
    },

    //添加授权按钮
    addPhoneBtn() {
      for (var i = 0; i < this.pageData.list.length; i++) {
        this.pageData.list[i].selected = false
      }
      this.pageData.list.push({
        type: 'phoneNum',
        styleObject: {
          backgroundColor: '#d86911',
          color: '#000000',
        },
        txt: '一键授权',
        selected: true,
      })
      this.selectObj = this.pageData.list[this.pageData.list.length - 1]
    },

    // 下移一位  ok!!!通用了
    move(index, obj, op) {
      if (op > 0) {
        // remove
        this.pageData.list.splice(index, 1)
        // add component
        this.pageData.list.splice(index + 1, 0, obj)
      }
      // else{
      //     this.pageData.list.splice(index, 1);
      //     // add component
      //     this.pageData.list.splice(index + 1, 0, obj);
      // }
    },

    //删除
    del(index, obj, bigobj, bigIndex = -1) {
      this.pageData.list.splice(index, 1)
    },

    //读取图片上传图片
    tirggerFile(e) {
      let _this = this
      let file = e.target.files[0]
      console.log('sssssssssssssssssss:', file)
      let url = ''
      //提交图片
      let param = new FormData()
      param.append('file', file, file.name)
      _this.listLoading = true
      uploadfile(param, { 'Content-Type': 'multipart/form-data' }).then(
        (response) => {
          _this.pageData.list[_this.pageData.list.length - 1].src = response.data.url

          // Just to simulate the time of the request
          // this.listLoading = false;
          setTimeout(() => {
            _this.listLoading = false
          }, 100)
        },
      )
    },
     //添加封面图
    addCoverImg(e) {
       this.file = e.target.files[0]
       let reader = new FileReader()
        var that = this
        reader.readAsDataURL(this.file)
        reader.onload = function(e) {
        that.coverImg = this.result
        } 
    },

    //读取视频上传视频
    changeVideo(e) {
      let video = e.target.files[0]
      let _this = this
      //提交图片
      let param = new FormData()
      param.append('file', video)
      _this.listLoading = true
      uploadfile(param, { 'Content-Type': 'multipart/form-data' }).then(
        (response) => {
          _this.pageData.list[_this.pageData.list.length - 1].src = response.data.url

          // Just to simulate the time of the request
          // this.listLoading = false;
          setTimeout(() => {
            _this.listLoading = false
          }, 100)
        },
      )
    },
    upload(data) {},

    //添加轮播图片
    addSwiperImgs(e) {
      let _this = this
      let file = e.target.files[0]
      let swiperImgUrl = ''

      //提交图片
      let param = new FormData()
      param.append('file', file, file.name)
      _this.listLoading = true
      uploadfile(param, { 'Content-Type': 'multipart/form-data' }).then(
        (response) => {
          for (let i = 0; i < this.pageData.list.length; i++) {
            if (this.pageData.list[i].type === 'swiper') {
              for (let j = 0; j < this.pageData.list[i].imgs.length; j++) {
                this.pageData.list[i].imgs[j].cheack = false
              }
              this.pageData.list[i].imgs.push({
                src: response.data.url,
                cheack: true,
              })
              this.selectObj = this.pageData.list[i]
            }
          }

          // Just to simulate the time of the request
          // this.listLoading = false;
          setTimeout(() => {
            _this.listLoading = false
          }, 100)
        },
      )
    },

    //轮播图的图片选择
    handleclick(index) {
      let idx = index
      for (let i = 0; i < this.selectObj.imgs.length; i++) {
        this.selectObj.imgs[i].cheack = false
      }
      this.selectObj.imgs[idx].cheack = true
    },

    //提交页面
    submitPage() {
      if (this.Name === "") {
        alert('页面名称不能为空')
      }else {
         //获得页面对象
          let pageDatea = JSON.stringify(this.pageData)
          let file = this.file
          let param = new FormData()
          param.append('file',file,file.name);//通过append向form对象添加数据
          param.append('Name',this.Name)
          param.append('JsonStr',pageDatea)
          param.append('Public',this.Public)
          saveAdPage({ 'Content-Type': 'multipart/form-data', Mdid: this.mdid },param).then((res)=> {
           if (res.data.msg === 'success') {
             alert('提交成功！')
           }
           
         })  
      }
     
    },
  },
}
</script>
<style scoped>
.body {
  max-height: calc(100vh - 90px);
  display: flex;
  /*width: 100%;*/
  /*border:1px solid blue;*/
}

.div-left {
  padding: 20px 5px 0 5px;
  border-right: 1px solid rgba(0, 0, 0, 0.35);
  flex: 2;
}

.div-middle {
  flex: 5;
  text-align: center;
  overflow-y: scroll;
}

.div-right {
  height: 100%;
  flex: 3;
  border-left: 1px solid rgba(0, 0, 0, 0.35);
}

.div-btn-type {
  line-height: 49px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.div-btn-type span {
  color: #000000;
  font-size: 14px;
  min-width: 80px;
}

.phone {
  width: 375px;
  padding-top: 20px;
  min-height: 1800px;
  display: inline-block;
  font-size: 0;
}
.no-data {
 width: 100%;
 height: 210px;
 background-color: #f4f4f4;
 color: #000;
 font-size: 16px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.phone img {
  max-width: 100%;
  display: inline-block;
}


.selected {
  border: 2px solid red;
  padding: 2px;
}

.video-box {
  width: 100%;
}

.add-video {
  width: 100%;
  height: 210px;
  background-color: #f4f4f4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon {
  width: 100%;
  height: 50px;
}

.icon img {
  height: 50px;
  width: auto;
}

.file {
  position: relative;
  display: inline-block;
  width: 140px;
  height: 50px;
  background: #fff;
  border: 1px dashed #000;
  padding: 4px 12px;
  overflow: hidden;
  color: #000;
  text-decoration: none;
  text-indent: 0;
  line-height: 40px;
  font-size: 14px;
}
.fileImg {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 36px;
  color: #1890ff;
  background: #e8f4ff;
  border:1px solid #a3d3ff;
  overflow: hidden;
  text-decoration: none;
  text-indent: 0;
  line-height: 36px;
  font-size: 14px;
  border-radius: 4px;
}
.fileImg input {
  position: absolute;
  font-size: 14px;
  width: 140px;
  height: 50px;
  right: 0;
  top: 0;
  opacity: 0;
}
.fileImg:hover {
  color: #FFFFFF;
  background-color: #1890ff;
  border-color: #1890ff;
}

.file input {
  position: absolute;
  font-size: 14px;
  width: 140px;
  height: 50px;
  right: 0;
  top: 0;
  opacity: 0;
}

.file:hover {
  background: #dcdee0;
  text-decoration: none;
}

.item-btn {
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

.select-set-div {
  position: absolute;
  right: -60px;
  top: -2px;
  font-size: 16px;
  width: 60px;
  border: 2px solid red;
  border-left: none;
  background: #fff;
}

.swiper-wraper {
  width: 100%;
  background-color: #f4f4f4;
}

.lunbo-img {
  width: 100%;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lunbo-img img {
  width: 100%;
  height: auto;
}

.lunbo-box {
  width: 100%;
  position: relative;
}

.lunbo-box > div:first-child {
  width: 100%;
}

.lunbo-box > div:first-child > img {
  width: 100%;
  height: auto;
}

.phone-box {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f4f4;
}

.phone-btn {
  width: 150px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #007aff;
  color: #fff;
  font-size: 14px;
}

/* 右侧轮播图样式 */
.swiper-edit {
  width: 100%;
}

.swiper-title {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #ddd;
  line-height: 50px;
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  padding: 0 10px;
}

.add-swiper {
  width: 100%;
}

.swiper-btn {
  flex: 1;
  width: 100%;
 padding: 15px 10px;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  margin-top: 20px;
  background-color: #f7f7f7;
  display: flex;
  align-items: center;
}

.btn-title {
  font-weight: 600;
  font-size: 14px;
  width: 80px;
}

.swiper-add {
   width: 180px;
   height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fdfff5;
  position: relative;
  border-radius: 6px;
  background-color: #ea801b;
}

.swiper-add > input {
  width: 80px;
  height: 30px;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
}

.add-img-box {
  width: 100%;
  padding: 10px;
}

.box-list {
  width: 100%;
  padding: 10px;
}

.swiper-list {
  width: 100%;
  min-height: 100px;
  padding: 4px;
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.show-swiper-img {
  width: 67px;
  height: 67px;
  margin-right: 10px;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.show-swiper-img > img {
  width: 100%;
  max-height: 100%;
}

.swiper-list .swiper-active {
  border: 1px solid #c7254e;
}
.img-edit-box{
  display: flex;
  flex-direction: row;
  padding: 10px;
  padding-bottom: 25px;
  font-size: 13px;
  color: #303133;
  line-height: 1.7;
 background-color: #f7f7f7;
}
.img-edit-left {
  flex-shrink: 0;
  margin-right: 10px;
  color: #666;
  min-width: 60px;
}
.img-edit-right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.space-box {
  position: relative;
  height: 120px;
  width: 200px;
  margin: 10px 0;
}
.margin-top-div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  border-top: 20px solid #d6e4ff;
  transition: all .3s ease;
}
.padding-top-div {
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #d6e4ff;
  transition: all .3s ease;
}
 .box-input {
  width: 100%;
  height: 20px;
  text-align: center;
  position: absolute;
  top: -20px;
  left: 0;
  background-color: transparent;
  outline: 0;
  border: 0;  
}
.margin-bottom-div {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  border-bottom: 20px solid #d6e4ff;
  transition: all .3s ease;
}
.margin-bottom-div .box-input-bottom{
  top: 0;
}
.padding-right-div {
   position: absolute;
   top: 30px;
   bottom: 30px;
    right: 0;
    width: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #d6e4ff;
    transition: all .3s ease;
}
.box-input-right {
   position: absolute;
    top: 0;
    bottom: 0;
    left: -42px;
    margin: auto;
    width: 80px;
    height: 20px;
    line-height: 20px;
    text-align: right;
    padding-right: 10px;
 }
 .padding-bottom-div {
   position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #d6e4ff;
    transition: all .3s ease;
 }
 .padding-left-div {
   position: absolute;
    top: 30px;
    bottom: 30px;
    left: 0;
    width: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #d6e4ff;
    transition: all .3s ease;
 }
 .box-input-left {
   position: absolute;
    top: 0;
    bottom: 0;
    left: -20px;
    margin: auto;
    width: 80px;
    height: 20px;
    line-height: 20px;
    text-align: left;
 }
.box-input-bottom {
  top: 0;
}
.img-link {
  width: 100%;
  padding: 15px 10px;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  margin-top: 20px;
  background-color: #f7f7f7;
}
.video-input {
  display: flex;
  flex-direction: row;
  margin: 20px 0;
}
.video-title {
  flex-shrink: 0;
  margin-right: 10px;
  color: #666;
  min-width: 60px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

/* 按钮编辑 */
.btn-edit {
  width: 100%;
}

.btn-title {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #000000;
  font-size: 600;
  padding: 0 10px;
}

.titel-mall {
  height: 50px;
  width: 100%;
  width: 100%;
  padding: 0 10px;
  font-size: 12px;
  color: #adadad;
  border-bottom: 1px solid #ddd;
}
.btn-main {
  width: 100%;
  padding: 20px 10px;
}
.main-title {
  width: 100%;
  height: 30px;
  font-size: 12px;
  font-weight: 600;
  color: #000000;
}
.btn-list {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
}
.list-left {
  width: 100px;
  height: 100%;
  font-size: 14px;
  color: #666666;
  display: flex;
  align-items: center;
}
.list-right {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.list-right > input {
  width: 100%;
  height: 30px;
}
.cover-box {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover-box img {
  height: 100%;
  width: auto;
  display: flex;
}
</style>
